<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input v-model="listQuery.userId" clearable placeholder="用户id" type="number"></el-input>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        :loading="listLoading"
        @click="handleFilter"
      >查询</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
      <el-button
        type="warning"
        @click="exportExcel('#WashAway-out-table1', '扭蛋数据')"
      >导出</el-button>
    </div>

    <div class="cs-filter-result">
      <el-table
        id="WashAway-out-table1"
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 250px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="用户ID" prop="accountId">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.accountId" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户昵称" prop="nickName"> </el-table-column>
        <el-table-column align="center" label="用户性别" prop="gender">
          <template slot-scope="{ row }">
            {{ row.gender | gender }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="花费钻石">
          20
        </el-table-column>
        <el-table-column align="center" label="公共初始奖池">1200000</el-table-column>
        <el-table-column align="center" label="个人初始奖池" prop="personalInitPool"> </el-table-column>
        <el-table-column align="center" label="公共奖池" prop="publicPool"></el-table-column>
        <el-table-column align="center" label="用户id" prop="accountId"> </el-table-column>
        <el-table-column align="center" label="时间">
          <template slot-scope="{ row }">
            {{ row.dateTime | parseTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="奖励钻石" prop="rewardDiamonds"></el-table-column>
        <el-table-column align="center" label="K_value" prop="kvalue"></el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>


<script>
    import TablePagination from '@/components/TablePagination'
    import { xhrEggSingle } from '@/api/analysis'
    export default {
      name: "dataVerification",
      components: { TablePagination },
      data() {
        return {
          list: 0,
          total: 0,
          daterangeValue: '',
          listQuery: {
            offset: 0,
            limit: 100,
            startTime: null,
            endTime: null
          }
        }
      },
      created() {
        const today = new Date()
        this.listQuery.endTime =today.getFullYear() + '-' + (today.getUTCMonth() + 1) + '-' + today.getUTCDate() + ' 23:59:59'
        this.listQuery.startTime = today.getFullYear() + '-' + (today.getUTCMonth() + 1) + '-' + today.getUTCDate() + ' 00:00:00'
        this.daterangeValue = [today, today]
        this.doSearch()
      },
      methods: {
        doSearch() {
          xhrEggSingle(this.listQuery).then(resp =>{
            this.listLoading = false
            this.total = resp.data.count
            this.list = resp.data.list
          }).catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
        },
      }
    }
</script>

<style scoped>

</style>
